<template>
	<view class="box">
		<!-- 订单头部 -->
		<view>
			<!-- 2.0.19支持autoBack，默认为false -->
			<u-navbar title="出租车订单" :autoBack="true" placeholder>
			</u-navbar>
		</view>
		<!-- 订单内容 -->
		<view v-for="i in OrderArr" :key="i.orderId">
			<!-- 遮罩层 -->
			<u-overlay :show="show" :opacity="0.7" v-for="g in Real_timeOrder" :key="g.id">
				<view class="Close">
					<u-icon name="close" color="white" size="28" @click="shows" ></u-icon>
				</view>
				
				<view class="Real_time">
					<h3>实时</h3>
					<h2><span>{{g.creationtime}}</span></h2>
					<p>乘客<text style="margin-left: 10px;">{{i.num}}人</text></p>
				</view>
				<view class="destination" style="margin-top: 5%;">
						<view class="round2">
							<u-badge :isDot="true" type="success" bgColor="green"></u-badge>
						</view>
					<p>{{g.origin}}</p>
				</view>
				<view class="destination" style="margin-top: 5%;">
					<view class="round2">
						<u-badge :isDot="true" type="success" bgColor="orange"></u-badge>
					</view>
					<p>{{g.bourn}}</p>
				</view>
				<view class="but">
					<button @click="DetOrder">接单</button>
				</view>
			</u-overlay>
			<!-- 订单信息 -->
			<view class="contentbox" @click="showOrder(i)">
				<p>{{i.creationtime}}
					<span>1+1</span>
				</p>
				<view class="begin">
					<view class="round">
						<u-badge :isDot="true" type="success" bgColor="orange"></u-badge>
					</view>
					<b>{{i.origin}}</b>
				</view>
				<view class="destination">
					<view class="round">
						<u-badge :isDot="true" type="success" bgColor="black"></u-badge>
					</view>
					<b>{{i.bourn}}</b><br>
				</view>
				<view class='destination_span'>
					<view class="contentbox_data">
						<view class="contentbox_num"><u-tag :text='i.num + "人"' type="warning" plain plainFill></u-tag></view>
						<h2>￥{{i.price}}</h2>
					</view>
				</view>
			</view>
		</view>
		<u-notify ref="uNotify" message="Hi uView"></u-notify>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false, //控制遮罩层显示
				// 订单信息
				OrderArr: [],
				Real_timeOrder: [] //接单列表
			}
		},
		methods: {
			showOrder(item) { //显示遮罩层
				console.log(item);
				this.show = !this.show
				this.Real_timeOrder = []
				this.Real_timeOrder.push(item)
				console.log(this.OrderArr,104);
			},
			shows() { // 关闭遮罩层i
				this.show = !this.show
			},
			DetOrder() { //接单跳转
				let orderArr = JSON.stringify(this.OrderArr)
				wx.setStorageSync('order', orderArr)
				uni.showToast({
					title: '接单成功',
					duration: 3000 //单位毫秒
				});
				uni.navigateTo({
				  url: '../placeofArrival/placeofArrival'
				});
			},
		},
		onLoad() {
			let that = this
			uni.request({
			  url: 'http://localhost:8000/taxiOrder',
			  data:{
			    carTary:"出租车"
			  },
			  method:'GET',//get是默认 可以省略
			  dataType:'json',  //json也是默认 可以不写
			  success:function(res){
			    console.log(res.data.data,124);
			    that.OrderArr = res.data.data
			  }
			})
		}
	}
</script>

<style lang="scss">
	
	.box {
		background-color: #F0F2F5;
		width: 100%;
		height: 100%;
		position: absolute;
	}
	
	.contentbox {
		width: 90%;
		height: 150px;
		background-color: white;
		border-radius: 20px;
		margin: 0 auto;
		margin-top: 5%;
	
	}
	
	.contentbox>p>span {
		height: 10px;
		width: 20px;
		background-color: #5E6976;
		color: white;
		font-weight: 700;
		border-radius: 5px;
		font-size: 12px;
		padding: 2px;
		margin-left: 5px;
	}
	
	.contentbox>p {
		font-weight: 700;
		padding-top: 5%;
		padding-left: 5%;
		font-size: 20px;
	}
	.contentbox_data{
		display: flex;
		margin-top: 15px;
		.contentbox_num{
			padding-left: 20px;
		}
	}
	.begin {
		display: flex;
	}
	.begin b {
		margin-left: 5%;
		font-size: 14px;
		color: #959EA9;
	}
	
	.destination {
		display: flex;
	}
	
	.destination b {
		margin-left: 5%;
		font-size: 14px;
		color: #959EA9;
	}
	
	.destination_span span {
		font-size: 14px;
		color: #959EA9;
		margin-left: 7%;
	}
	
	.destination_span h2 {
		position: absolute;
		right: 10%;
		font-size: 24px;
	}
	
	.Close {
		position: absolute;
		right: 5%;
		top: 10%;
	}
	
	.Real_time {
		width: 50%;
		margin: 0 auto;
		margin-top: 40%;
	}
	
	.Real_time h3 {
		color: white;
		text-align: center;
	}
	
	.Real_time h2 {
		color: white;
		text-align: center;
		font-weight: 400;
	}
	.Real_time span {
		color: white;
		text-align: center;
		font-size: 30px;
		font-weight: 900;
	}
	
	.Real_time p {
		color: #90909A;
		text-align: center;
	}
	
	.destination p {
		color: #DADCE8;
		font-size: 24px;
		margin-left: 10px;
	}
	.but {
		position: absolute;
		bottom: 0;
		width: 100%;
	}
	
	.but>button {
		background-color: orange;
		color: white;
		height: 60px;
		line-height: 60px;
		font-size: 20px;
	}
	.round{
		margin-top: 5px;
		margin-left: 5%;
	}
	.round2{
		margin-top: 12px;
		margin-left: 10%;
	}
</style>
